<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Responsive Admin Dashboard Template">
        <meta name="keywords" content="admin,dashboard">
        <meta name="author" content="skcats">
		<title></title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
        <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
        <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
	</head>
	<style>
    .utable .layui-laypage .layui-laypage-curr {
        background-color: #1E9FFF;
    }
    .layui-input-inline{margin-left: 50px;}
    .layui-form-item{margin-top: 20px;}
    .layui-form-label{width: 80px;}
	</style>
<body>
<!--数据表格样式及附件-->	
<script type="text/html" id="bar">
<!--    <form th:action="@{/dataDoc/download}" method="post" id="sub">-->
    <button class="layui-btn layui-btn-xs" lay-event="download" >
        <i class="layui-icon">&#xe642;</i>下载文件
    </button>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>丢弃
    </a>
	</script>
 <!--搜索栏-->


<!--数据表格  数据表格使用的是方法渲染-->
<div class="utable">



    <form method="post" th:action="@{/dataDoc/add}" enctype="multipart/form-data">
        <div class="layui-form-item" style="margin-bottom: 0px;margin-left: 130px;margin-top: 15px">

            <div class="layui-inline">
                <label class="layui-form-label" style="width: 90px;margin-left: 20px">说明：</label>
                <div class="layui-input-inline">
                    <input id="explain" type="text" name="remark" placeholder="说明" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="width: 350px">
                <label class="layui-form-label" style="width: 90px">文件：</label>
                <div class="layui-input-inline">
                    <input id="file" style="margin-top: 5px" type="file" required name="file"/>
                </div>
            </div>
            <input type="submit" class="layui-btn" value="立即添加" style="margin-top: -10px;margin-left: 50px">
        </div>
    </form>






<table class="layui-table"
       lay-data="{width:1150,height:650, url:'/dataDoc/data', page:true, id:'tab',toolbar: '#toolbarDemo' }"
       lay-filter="test">
    <thead>
    <tr>
        <th lay-data="{field:'docid', width:80, sort: true}">ID</th>
        <th lay-data="{field:'dataname',width:330}">文件名称</th>
        <th lay-data="{field:'empName',width:100}">上传人员</th>
        <th lay-data="{field:'optime'}">上传时间</th>
        <th lay-data="{field:'remark'}">说明</th>
        <th lay-data="{fixed: 'right', title:'操作', toolbar: '#bar'}"></th>
    </tr>
    </thead>
</table>
</div>
</body>
<script id="toolbarDemo" type="text/html">


</script>

<script th:src="@{/js/register/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    layui.use('table', function () {
        var table = layui.table;


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event == 'del') {
                layer.confirm('真的删除么?', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: '/dataDoc/del',
                        type: 'post',
                        data: {
                            id:data.docid
                        },
                        dataType: 'text',
                    })
                });
            } else if (obj.event == 'download') {
                document.location.href="/dataDoc/download?id="+data.docid;
                out.clear();
                out=pageContext.pushBody();
            }
        })

    })
</script>
</html>